<template>
  <div class="box">
      <div style="height:15px;background: #f8f8fa"></div>
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="false"
      finished-text="我是有底线的"
      @load="onLoadlist"
    >
      <div
        class="motion_top"
        v-for="(item,i) in list"
        :key="i"
      >
        <p><span>{{item.sport_time}}</span></p>
        <p><span>步数:</span> <span>{{item.step_count}}</span></p>
        <p>得分 <span>{{item.code}}</span></p>
      </div>
    </van-list>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      list: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1, // 页码
      page: 0
    };
  },
  created() {
    this.getmMySports(0);
  },
  methods: {
    // 加载
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getmMySports(p);
    },
    async getmMySports(cursor) {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      await this.$http
        .get(
          `yuepoints/mySports?corpId=${corpId}&cursor=${cursor}&userId=${userId} `
        )
        .then(res => {
          const { data, cursor } = res.data;
          if (data.length === 0 || data === null) {
            this.finished = true;
            // this.$toast("数据为空！");
            return;
          }
          if (data.length < this.pageSize) {
            this.finished = true;
          }
          if (this.pageIndex === 1) {
            this.list = data;
          } else {
            this.list = this.list.concat(data);
          }
          if (cursor > 0) {
            this.page = cursor;
          }
        })
        .catch(error => {
          this.$toast({
            showClose: true,
            message: "获取资源列表异常{" + error + "}",
            type: "error"
          });
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  // width: 90%;
  // margin: 10px auto;
  padding-bottom: 55px;
  background: #f8f8fa;
  p {
    margin: 0px;
    padding: 0px;
  }
  .motion_top {
    margin: 0px 10px;
    background: #fff;
    box-shadow: 0px 9px 4px 0px rgba(0, 42, 105, 0.05);
    border-radius: 5px;
    text-align: left;
    font-size: 16px;
    padding: 8px 15px;
    margin-bottom: 10px;
    p:nth-child(2) {
      span:last-child {
        color: rgb(7, 173, 110);
      }
    }
    p:last-child {
      font-size: 13px;
      color: rgb(7, 173, 110);
      margin-top: 5vh;
    }
  }
}
</style>
